<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆</title>
    <link rel="stylesheet" type="text/css" href="css/login.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main_login">
    <div class="login_1">
        <a href="index.html"><img src="images/login.img/logo.png" alt=""></a>
        <b></b>
    </div>
    <div class="login_2">
        <div class="login_3">
            <img src="images/login.img/pcloginpic.png" alt="">
        </div>
        <div class="login_4">
            <ul class="login_5">
                <li id="btn_1">
                    <a href="javascript:void(0)">扫码登陆</a>
                </li>
                <li id="btn_2">
                    <a href="javascript:void(0)">账户登陆</a>
                </li>
            </ul>
            <div class="login_7">
                <div id="lgsf" class="login_sf">
                    <div class="login_6">
                        <img class="img_2" src="images/login.img/GetQR.gif" alt=""> <span>扫码二维码</span> <span>打开<a class="a_1" href="#">中酒APP</a></span>
                    </div>
                    <span><img src="images/login.img/sao_2.png" alt=""></span>
                </div>
                <div id="lgzf" class="login_zf">
                    <div class="form">

                        <div class="tips"><i></i>
                            <p>公共场所不建议自动登录，以防账号丢失</p>
                        </div>
                        <div>
                            <div class="icon_name"></div>
                            用户名: <input class="txt" type="text"/>
                        </div>
                        <div>
                            <div class="icon_pwd"></div>
                            密&nbsp;&nbsp;&nbsp;码: <input class="pwd" type="password"/>
                        </div>
                        <div class="check_1">
                            <label> <input id="autoLogin" class="checkbox" name="" type="checkbox"> 自动登陆 </label>
                        </div>
                        <div>
                            <a class="check_2" href="#">忘记密码</a>
                        </div>
                        <div>
                            <input class="submit" type="submit" value="登陆"/>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="box">
            <ul class="ul_2">
                <li>
                    <a href="#">QQ</a>
                </li>
                <li>
                    <a href="#">微博</a>
                </li>
                <li>
                    <a href="#">微信</a>
                </li>
                <li>
                    <a href="register.html">立即注册</a>
                </li>
            </ul>
        </div>
    </div>
</div>


</body>
</html>
<script type="text/javascript">
    var oBtn1 = document.getElementById("btn_1")
    var oBtn2 = document.getElementById("btn_2")
    var oZf = document.getElementById("lgzf")
    var oSf = document.getElementById("lgsf")
    oBtn1.onclick = function(){
        oSf.setAttribute("class", "login_sf");
        oZf.setAttribute("class", "login_zf");
        oBtn1.children[0].style.color="#e54b54"
        oBtn2.children[0].style.color="#333"
    }
    oBtn2.onclick = function(){
        oSf.setAttribute("class", "login_zf");
        oZf.setAttribute("class", "login_sf");
        oBtn1.children[0].style.color="#333"
        oBtn2.children[0].style.color="#e54b54"
    }
</script>